import {mockList} from  './mock';
// var canvas = document.querySelector('#canvas');
// // console.log(canvas,canvas.width,canvas.style);
// canvas.width = 1600;
// canvas.height = 900;
// var context = canvas.getContext('2d');

// context.moveTo(100,100);

// context.lineWidth = 5;
// context.strokeStyle = '#33aeff';
// context.stroke();

// //画点
// context.fillStyle = '#33aeff';
// context.fillRect(200,200,15,15);

// context.arc(200,100,8,0,Math.PI*2);
// context.fill();
// let position = {
//   x: 0 ,
//   y: 0
// };
// function drawRandomPoint () {
//   context.beginPath();
//   context.fillStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
//   context.arc(Math.random()*800,Math.random()*800,Math.random()*10,0,Math.PI*2);
//   context.fill();
//   context.stopPath();
// }
// // setInterval(drawRandomPoint,1000);

// // 字
// context.fillStyle = '#000';
// context.font='16px sans-serif';
// context.fillText("(100,100)", 100, 100);

// // 线
// context.moveTo(50, 50);
// context.lineTo(130,120);
// context.lineWidth = 5;
// context.lineCap = 'round';
// context.stroke();

//画线
// function drawLine ( start, end ,res) {
//   context.beginPath();
//   context.moveTo(start.x,start.y);
//   context.lineTo(end.x,end.y);
//   context.stroke();
//   context.closePath();
//   if(res) {
//     return res();
//   }
// }

// async function drawLineAction (start, end, duration) {
//   return new Promise(function (res,rej) {
//     const xSpeed = (end.x - start.x)/duration;
//     const ySpeed = (end.y - start.y)/duration;
//     const xStep = xSpeed*20;
//     const yStep = ySpeed*20;
//     let time = 0;
//     let startPosition = {x:start.x, y:start.y};
//     let endPosition = {x:startPosition.x+xStep,y:startPosition.y+yStep};
//     function step () {
//       drawLine(startPosition,endPosition);
//       startPosition = endPosition;
//       endPosition = {x:startPosition.x+xStep,y:startPosition.y+yStep}
//       time += 20;
//       startPosition
//       if(time<duration) {
//         setTimeout(step,20);
//       } else {
//         endPosition = end;
//         return setTimeout(drawLine(startPosition,endPosition,res),20);
//       }
//     }
//     step();
//   })
// }
// async function connectPoints () {
//   await drawLineAction({x:400,y:100},{x:600,y:550},2000);
//   await drawLineAction({x:600,y:550},{x:150,y:300},3000);
//   await drawLineAction({x:150,y:300},{x:650,y:300},4000)
//   await drawLineAction({x:650,y:300},{x:200,y:550},5000)
//   await drawLineAction({x:200,y:550},{x:400,y:100},1000);
//   // context.clearRect(0,0,canvas.width,canvas.height);
// }

// connectPoints();

// function drawPentagram () {
//   context.moveTo(300,100);
  
// }
// console.log(mockList);
import AvaPen from './avaPen';
// import './assets/css/player.css';

const pen = new AvaPen('player').setup({background:'statics/test.jpg',showPlay:true,pointList:mockList});
// pen.init();
// pen.loadData(mockList);
// pen.play();
// pen.drawCompletedPicture();
